<template>
    <!-- 这里是每个分类的商品组件 -->
    <div class="classify">
        <!-- 顶部文字和查看更多 -->
        <div class="title">
            <h1>{{classify.name}}</h1>
            <span @click="goProOne(id)">查看更多 <i class="el-icon-arrow-right"></i> </span>
        </div>
        <!-- 商品列表 -->
        <ul class="goodList">
            <GoodCart v-for="good in goods" :key="good.id" :good="good"/>
        </ul>
    </div>
</template>

<script>
import { getGoods } from "@/assets/request.js"
import GoodCart from "./GoodCart.vue"
export default {
    name:"ClassifyList",
    props:["id","classify"],
    data(){
        return{
        // 穿戴等多个商品数组
        goods:[],
        } 
    },
    components:{
        GoodCart,
    },
    methods:{
        // 跳转到产品页
        goProOne(id) {
            this.$router.push({
                name: "proOne",
                params: {
                    id,
                }
            })
        },
    },

    async mounted() {
        let res = await getGoods({
            project_id:255,
            classify_id:this.$props.id
        })
        this.goods=res.data.result.rows.splice(0,8);
    },
    
}
    
</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}
.classify{
    width: 100%;
    background-color: rgb(226, 229, 231);
    .title {
        width: vw(1200);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:vw(30) 0 vw(16) 0;
        h1{
            font-size: vw(24);
            font-weight: 500;
        }
        span{
            cursor:pointer;
        }
    }
    .goodList{
        width: vw(1200);
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
</style>
